<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jsLib/angular.js"></script>
    <title></title>
    <style>
        .light{
            background-color: lightgreen;
        }
        .gray{
            background-color: lightgray;
        }
    </style>
</head>
<body ng-app="app" ng-controller="control">
<table>
    <tr ng-repeat="item in items" ng-class="{light:$index==showLight,gray:$index==showGray}">
        <td ng-bind="item.name"></td>
        <td><button ng-click="show($index)">高亮</button></td>
        <td><button ng-click="gray($index)">灰色</button></td>
    </tr>
</table>
<script>
    var app=angular.module('app',[]);
    app.controller('control',function($scope){
        var books=[{name:"angularJs"},{name:"php"},{name:"js"},{name:"java"}];
        $scope.showLight=1;
        $scope.items=books;
        $scope.show=function(number){

            $scope.showLight=number;
            $scope.showGray='else';
        }
        $scope.gray=function(number){

            $scope.showLight='else';
            $scope.showGray=number;
        }


    })
</script>
</body>
</html>